<template>
  <div>
    <a-row justify="left" style="padding-top: 1rem; padding-bottom: 1rem">
      <a-col span="24">
        <a-form layout="inline">
          <a-form-item label="部门" :labelCol="{ style: 'width:60px' }">
            <a-select :options="deptOptions" v-model:value="selectDeptId" style="width: 200px">
            </a-select>
          </a-form-item>
          <a-form-item label="时间段" :labelCol="{ style: 'width:60px' }">
            <a-radio-group
              v-model:value="selectTimeType"
              button-style="solid"
              @change="onTimeTypeChange"
              style="width: 150px"
            >
              <a-radio-button value="6">月</a-radio-button>
              <a-radio-button value="7">季度</a-radio-button>
              <a-radio-button value="8">年</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item required="true" label="时间选择" :labelCol="{ style: 'width:80px' }">
            <a-date-picker
              v-if="selectTimeType == '6'"
              v-model:value="selectTime"
              picker="month"
              style="width: 200px"
              @change="onDatePickerChange"
            />
            <a-date-picker
              v-if="selectTimeType == '7'"
              v-model:value="selectTime"
              picker="quarter"
              style="width: 200px"
              @change="onDatePickerChange"
            />
            <a-date-picker
              v-if="selectTimeType == '8'"
              v-model:value="selectTime"
              picker="year"
              style="width: 200px"
              @change="onDatePickerChange"
            />
          </a-form-item>
          <a-form-item
            ><a-button type="primary" @click="onDutyQueryButtonClick">显示值班表</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <table style="width: 100%" id="dutyTable">
      <!-- 表头：第一行显示分组名称，第二行显示值班成员姓名、手机号信息 -->
      <tr v-for="row in dutyTable.headerRows">
        <th
          v-for="cell in row.cells"
          :rowspan="cell.rowspan"
          :colspan="cell.colspan"
          :style="cell.style"
          >{{ cell.text }}</th
        >
      </tr>
      <tr v-for="row in dutyTable.bodyRows">
        <td
          v-for="cell in row.cells"
          :rowspan="cell.rowspan"
          :colspan="cell.colspan"
          :style="cell.style"
          >{{ cell.text }}</td
        >
      </tr>
    </table>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, unref, computed } from 'vue';

  import { Dayjs } from 'dayjs';

  import { getDisplayTable } from '/@/api/duty/display'; // api
  import { getDefaultProjectValidDepts } from '/@/api/platform/qcPlatform';
  import { DutyDisplayQueryConditionDto } from '/@/api/duty/model/displayModel';

  import { useUserStore } from '/@/store/modules/user';

  export default defineComponent({
    name: 'DutyTable',
    components: {},
    setup() {
      const userStore = useUserStore();

      const deptOptions = ref([]);
      const selectDeptId = ref<Number>(4);
      const selectTimeType = ref('6');
      const selectTime = ref<Dayjs>();
      const selectTimeText = ref('');

      const dutyTable = reactive({
        title: {},
        headerRows: {},
        bodyRows: {},
      });

      function onTimeTypeChange(e) {
        // console.log('onTimeTypeChange', e);
        // console.log('selectTimeType', selectTimeType.value);
      }

      function onDatePickerChange(date) {
        // console.log('onDatePickerChange', date);
        let year = date.get('year');
        let month = date.get('month') + 1; //month从0开始，需要加1
        if (selectTimeType.value == '6' || selectTimeType.value == '7') {
          selectTimeText.value = year + '-' + month + '-1';
        } else {
          selectTimeText.value = year + '-1-1';
        }
      }

      /**
       * 获取部门列表
       */
      function getDepts() {
        let currentProjectCode = userStore.getUserCurrentProjectCode;
        getDefaultProjectValidDepts(currentProjectCode)
          .then((res) => {
            // console.log('getDefaultProjectValidDepts res', res);
            deptOptions.value = [];
            res.forEach((element) => {
              //根据层级在栏目名称前添加空格，实测空格无效，显示时没有空格
              let prefixSpaces = '';
              for (let index = 0; index < element.level; index++) {
                prefixSpaces += '--';
              }
              deptOptions.value.push({
                value: element.id,
                label: prefixSpaces + element.name,
              });
            });
            //设置默认选中第1个
            selectDeptId.value = res[0].id;
          })
          .catch((ex) => {
            console.log('getDefaultProjectValidDepts ex', ex);
          });
      }

      /**
       * 获取表格形式展示的值班表数据
       */
      function getDisplayTableData(queryConditionDto) {
        getDisplayTable(queryConditionDto)
          .then((res) => {
            // console.log('getDisplayTableData res', res);
            // dutyTable.title = res.title;
            dutyTable.headerRows = res.headerRows;
            dutyTable.bodyRows = res.bodyRows;
          })
          .catch((ex) => {
            console.log('getDisplayTableData ex', ex);
          });
      }

      function onDutyQueryButtonClick() {
        let queryConditionDto: DutyDisplayQueryConditionDto = {
          date: selectTimeText.value,
          tmtype: selectTimeType.value,
          deptids: [selectDeptId.value],
        };
        getDisplayTableData(queryConditionDto);
      }

      onBeforeMount(() => {
        getDepts();
        // getDisplayTableData();
      });

      return {
        deptOptions,
        selectDeptId,
        selectTimeType,
        selectTime,
        selectTimeText,
        dutyTable,
        onTimeTypeChange,
        onDutyQueryButtonClick,
        onDatePickerChange,
      };
    },
  });
</script>
<style scoped lang="less">
  #dutyTable {
    tr td {
      @apply text-sm font-normal;
    }

    tr td,
    th {
      border: 1px solid black;
      text-align: center;
      vertical-align: middle;
    }
  }
</style>
